<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<table id="tt" class="easyui-datagrid" title="用户资料" style="width:100%;height:100%;"
        data-options="url:'app/user/datas',
                      method:'get',
                      nowrap:true,
                      toolbar:'#tb',
                      fitColumns:true,
                      pagination:true,
                      rownumbers:true,
                      singleSelect:true,
                      pageSize:50,
                      fit:true,
                      remoteSort:false">
    <thead>
        <tr>
            <th data-options="field:'id',hidden:true">#</th>
            <th data-options="field:'roleId',hidden:true">#</th>
            <th data-options="field:'name',width:20">姓名</th>
            <th data-options="field:'password',width:20">密码</th>
            <th data-options="field:'role',width:20">角色</th>
            <th data-options="field:'age',width:20">年龄</th>
            <th data-options="field:'email',width:40">电子邮件</th>
            <th data-options="field:'createdAt',width:40,formatter:formatDate">创建日期</th>
        </tr>
    </thead>
</table>

<!--------------------------------------- toolbar  ------------------------------------------------------>
<div id="tb">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td><a id="btnAdd" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a></td>
            <td><div class="datagrid-btn-separator"></div></td>
            <td><a id="btnEdit" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a></td>
            <td><div class="datagrid-btn-separator"></div></td>
            <td><a id="btnDelete" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a></td>
        </tr>
    </table>
</div>


<!--------------------------------------- form  ------------------------------------------------------>
<div id="w" class="easyui-window" title="添加/修改" data-options="modal:true,closed:true,footer:'#footer'" style="width:800px;height:500px;padding:10px;">
    <form id="ff" method="post">
        <input type="hidden" name="id" id="id" />
        <table cellpadding="5">
            <tr>
                <td>姓名:</td>
                <td><input class="easyui-textbox" type="text" id="name" name="name" style="width:300px;" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input class="easyui-textbox" type="password" id="password" name="password" style="width:300px;" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input class="easyui-numberbox" type="text" id="age" name="age" data-options="required:true,min:0,max:300"></input></td>
            </tr>
            <tr>
                <td>电子邮件:</td>
                <td><input class="easyui-textbox" id="email" name="email" data-options="validType:'email'" style="width:300px;"></input></td>
            </tr>
            <tr>
                <td>角色:</td>
                <td>
                    <input class="easyui-combobox" name="roleId" id="roleId"
		            data-options="
		                    url:'app/role/selectDatas',
		                    method:'get',
		                    required:'true',
		                    valueField:'id',
		                    textField:'role',
		                    panelHeight:'auto'">
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="footer" data-options="region:'south',border:false" style="text-align:right;padding:2px;">
    <a id="btnSave" class="easyui-linkbutton"  href="javascript:void(0)" style="width:80px">确定</a>
    <a id="btnCancel" class="easyui-linkbutton"  href="javascript:void(0)" style="width:80px">取消</a>
</div>


<script type="text/javascript">

$(function($){
	var url;
	var saveOrUpdate = function(){

	    $('#ff').form('submit', {
	      url : url,
	      onSubmit : function() {
	        return $(this).form('validate');
	      },
	      success : function(result) {
	        json = JSON.parse(result);
	        if (json.status == 0) {
	          $.messager.show({
	            title : 'Error',
	            msg : '服务器出错，请稍后再试'
	          });
	        } else {
	          $('#w').window('close'); // close the dialog
	          $('#tt').datagrid('reload'); // reload the data
	        }
	      }
	    });
	  }
	
	$("#btnDelete").click(function(){
		var row = $('#tt').datagrid('getSelected');
        if (row){
          $.messager.confirm('提示','确定要删除？',function(r){
            if (r){
                $.ajax({
                    url: 'app/user/delete/' + row.id,
                    type:'post',
                    dataType: "json",
                    success: function(json){
                        if (json.status == 1) {
                            $('#tt').datagrid('reload');
                        } else {
                            $.messager.show({
                                title : '删除异常',
                                msg : json.message
                            });
                        }
                    },
                    error: function(msg){
                        $.messager.show({
                            title : '出错',
                            msg : '服务器出错，请稍后再试:' + msg
                        });
                    }
                });
            }
          });
        }
	});
	
	$("#btnEdit").click(function(){
		var row = $('#tt').datagrid('getSelected');
        if (row){
          $('#w').window('open');
          $('#ff').form('load',row);
          url = "app/user/update";
        } else {
        	$.messager.alert('提示',"请选择一条记录");
        }
	});
	
	$("#btnAdd").click(function(){
		$('#w').window('open');
        $('#ff').form('clear');
        url = "app/user/save";
	});
	
	$("#btnCancel").click(function(){
        $('#w').window('close');
	});
	
	$("#btnSave").click(function(){
		saveOrUpdate();
	});
})
</script>
